Crear diseños responsivos es un desafío común para los desarrolladores web. En este blog, exploraremos cómo lograr un diseño responsivo específico usando diferentes técnicas CSS, centrándonos en por qué CSS Grid es el mejor enfoque para este diseño en particular.

El desafío

Necesitamos crear un diseño donde:

Vista de escritorio:

• DIV 1 y DIV 3 se apilan verticalmente a la izquierda y cada uno ocupa el 50 % de la columna de la izquierda.
• DIV 2 ocupa toda la altura de la columna derecha.

Vista móvil:

• Los tres divs se apilan verticalmente.

Por qué Flexbox se queda corto

Flexbox es excelente para diseños unidimensionales, pero tiene problemas con diseños bidimensionales complejos como el nuestro. He aquí por qué:

 

   
DIV 1
   
DIV 2
   
DIV 3
 

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
}

.item {
    background-color: #40c4ff;
    color: white;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}

.item:nth-child(1),
.item:nth-child(3) {
    flex: 1 1 calc(50% - 10px);
}

.item:nth-child(2) {
    flex: 1 1 50%;
}

@media (max-width: 768px) {
    .item {
        flex: 1 1 100%;
    }
}

Problemas con Flexbox

En esta configuración de flexbox:

• DIV 2 no puede ajustar automáticamente su altura para que coincida con la altura combinada de DIV 1 y DIV 3.
• Flexbox es principalmente para diseños unidimensionales (ya sea fila o columna), no para arreglos bidimensionales complejos.

La solución CSS Grid

CSS Grid se destaca en la creación de diseños bidimensionales, lo que lo hace perfecto para este desafío.

 

   
DIV 1
   
DIV 2
   
DIV 3
 

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 10px;
}

.item {
    background-color: #40c4ff;
    color: white;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}

.item:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.item:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

.item:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

@media (max-width: 768px) {
    .container {
        display: flex;
        flex-direction: column;
    }
    .item {
        width: 100%;
    }
}

Explicación

Diseño de cuadrícula:

• Define una cuadrícula con dos columnas y dos filas.
• Coloca DIV 1 en la primera columna y primera fila.
• Coloca el DIV 2 en la segunda columna, abarcando dos filas.
• Coloca DIV 3 en la primera columna y segunda fila.

Diseño Responsivo:

• Para pantallas de 768 px o menos, el diseño cambia a flexible, apilando elementos verticalmente.

Conclusión

Si bien Flexbox es ideal para diseños unidimensionales más simples, CSS Grid proporciona la potencia y la flexibilidad necesarias para diseños bidimensionales más complejos. Al utilizar CSS Grid, podemos lograr fácilmente el diseño responsivo deseado con un código mínimo y el máximo control.

¡Siéntete libre de adaptar este ejemplo para adaptarlo a tus propios proyectos y disfrutar de los beneficios de usar CSS Grid para tus diseños responsivos!